<template>
<div class="father">
    <h3>父组件</h3>
    <!--v-model用在html标签上,等价于下面的写法-->
    <input type="text" v-model="username">
    <input type="password" v-model="passwd">
    <!--底层写法-->
    <!-- <input type="text" :value="username" @input="username=(<HTMLInputElement>$event.target).value"> -->
    <p>v-model用在组件上</p>
    <AtguiguInput v-model:uname="username" v-model:pwd="passwd"/>
    <!--底层写法-->
    <!-- <AtguiguInput :modelValue="username" @update:modelValue="username = $event"/> -->

</div>
</template>

<script lang="ts" setup name="Father">
import { ref } from 'vue';
import AtguiguInput from './AtguiguInput.vue';

let username = ref('li')
let passwd = ref('')
</script>

<style scoped>
.father{
    background-color: rgb(164, 164, 164);
    padding: 20px;
    border-radius: 10px;
}
</style>